<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="15">
        <div class="grid-content bg-purple">
          <el-button size="mini" round @click="add()" icon="el-icon-plus">新增企业信息</el-button>
          <el-button size="mini" round @click="edit()" icon="el-icon-edit"
            :disabled="selectList.length == 0 || selectList.length > 1">修改企业信息</el-button>
          <el-button size="mini" round @click="dele()" icon="el-icon-delete" :disabled="selectList.length == 0">删除
          </el-button>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="grid-content bg-purple searchBox">
          <el-input size="mini" v-model="formInline.user" placeholder="请输入ID进行查询">
          </el-input>
          <el-button size="mini" round @click="search()" style="margin-left: 10px;" icon="el-icon-search">查询</el-button>
          <el-button size="mini" round @click="search()" icon="el-icon-refresh">刷新</el-button>
        </div>
      </el-col>
    </el-row>
    <el-table :data="tableData" ref="tableDataTotal" border style="width: 100%;margin-top: 15px;" @row-click="clickRow"
      stripe :row-style="rowStyle" :row-class-name="rowClassName" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40px"></el-table-column>
      <el-table-column sortable fixed prop="ID" label="ID">
      </el-table-column>
       <el-table-column sortable prop="name" label="企业名称">
      </el-table-column>
      <el-table-column sortable prop="address" label="企业地址">
      </el-table-column>
      <el-table-column sortable prop="num" label="企业人数">
      </el-table-column>
      <el-table-column sortable prop="personInCh" label="负责人">
      </el-table-column>
      <el-table-column sortable prop="phoneNumber" label="联系电话">
      </el-table-column>
    </el-table>
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
      layout="total, sizes, prev, pager, next, jumper" :total="400">
    </el-pagination>
    <el-dialog v-el-drag-dialog class="new-dialog" :title="title+'企业信息'" :visible.sync="showFlag" width="50%" @close="handleClose('ruleForm')">
      <el-card class="box-card" style="padding:5px 10px 0 10px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
                                     <el-form-item label="企业名称" prop="name">
            <el-input size="mini" v-model="ruleForm.name" placeholder="请输入企业名称"></el-input>
          </el-form-item>
          <el-form-item label="企业地址" prop="address">
            <el-input size="mini" v-model="ruleForm.address" placeholder="请输入企业地址"></el-input>
          </el-form-item>
          <el-form-item label="企业人数" prop="num">
            <el-input size="mini" v-model="ruleForm.num" placeholder="请输入企业人数"></el-input>
          </el-form-item>
          <el-form-item label="负责人" prop="personInCh">
            <el-input size="mini" v-model="ruleForm.personInCh" placeholder="请输入负责人"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phoneNumber">
            <el-input size="mini" v-model="ruleForm.phoneNumber" placeholder="请输入联系电话"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button round size="mini" @click="handleClose('ruleForm')">取 消</el-button>
        <el-button round size="mini" type="primary" @click="save('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import elDragDialog from "@/utils/dragDialog";
export default ({
  directives:{elDragDialog},//dialog弹窗可拖拽
  name: 'diagnosis',
  // components: { local, outlands },
  data() {
    return {
      // activeName: '1',
      tableData: [{
        ID:'1',
        name: '海口那可是家大有限公司',
        personInCh:'郝建',
        address:'上海市普陀区金沙江路 1518 弄',
        phoneNumber:'123456789',
        num:'234567人'
      }
        ,{
          ID:'2',
        name: '海口那可是家大有限公司',
        personInCh:'郝建',
        address:'上海市普陀区金沙江路 1518 弄',
        phoneNumber:'123456789',
        num:'234567人'
      }, {
          ID:'3',
        name: '海口那可是家大有限公司',
        personInCh:'郝建',
        address:'上海市普陀区金沙江路 1518 弄',
        phoneNumber:'123456789',
        num:'234567人'
      }, {
          ID:'4',
        name: '海口那可是家大有限公司',
        personInCh:'郝建',
        address:'上海市普陀区金沙江路 1518 弄',
        phoneNumber:'123456789',
        num:'234567人'
      }, {
          ID:'5',
        name: '海口那可是家大有限公司',
        personInCh:'郝建',
        address:'上海市普陀区金沙江路 1518 弄',
        phoneNumber:'123456789',
        num:'234567人'
      }],
      formInline: {
        user: ''
      },
      currentPage: 1,
      showFlag: false,
      ruleForm: {
        name: '',
        personInCh:'',
        address:'',
        phoneNumber:'',
        num:''
      },
      rules: {
        name: [
          { required: true, message: '请输入企业名称', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入企业地址', trigger: 'blur' },
        ],
        personInCh:[{ required: true, message: "联系人不能为空", trigger: "blur" }],
        num:[{ required: true, message: "企业人数", trigger: "blur" }],
        phoneNumber:[{ required: true, message: "手机号不能为空", trigger: "blur" }],
      },
      selectList: [],
      tableDataTotal: 0,
      title: ''
    }
  },
  mounted() {
  },
  methods: {
    filterTag(value, row) {
      return row.tag === value;
    },
    handleSelectionChange(val) {
      console.log(val)
      this.selectList = val;
    },
    clickRow(row) {
      console.log(row)
      this.$refs.tableDataTotal.toggleRowSelection(row);
    },
    rowStyle({ row, rowIndex }) {
      Object.defineProperty(row, 'rowIndex', { //给每一行添加不可枚举属性rowIndex来标识当前行
        value: rowIndex,
        writable: true,
        enumerable: false
      })
    },
    rowClassName({ row, rowIndex }) {
      let rowName = "",
        findRow = this.selectList.find(c => c.rowIndex === row.rowIndex);
      if (findRow) {
        rowName = "currentRowStyle "; // elementUI 默认高亮行的class类 不用再样式了^-^,也可通过css覆盖改变背景颜色
      }
      return rowName; //也可以再加上其他类名 如果有需求的话
    },
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      // this.pageSize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    search() {

    },
    add() {
      this.title = '新增'
      this.showFlag = true
    },
    edit() {
      console.log(this.selectList)
      this.title = '修改'
        this.showFlag = true
        this.ruleForm={
        name: this.selectList[0].name,
        personInCh:this.selectList[0].personInCh,
        address:this.selectList[0].address,
        phoneNumber:this.selectList[0].phoneNumber,
        num:this.selectList[0].num
        }
    },
    dele() {
      var delArr = [];
      this.selectList.map((item)=>{
        delArr.push(item.ID)
      })
      console.log(delArr)
      this.$confirm('此操作将永久删除id为' + delArr.join(',') + '的信息, 是否继续?', '删除提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          message: '删除成功!',
          type: 'success'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          this.$message({
            message: this.title+'成功!',
            type: 'success'
          });
          this.showFlag=false
        } else {
          this.$message.error(this.title+'失败!');
          return false;
        }
      });
    },
    handleClose(formName) {
      this.showFlag = false
      this.$refs[formName].resetFields();
    },
  }
})
</script>
<style scoped>


.searchBox {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}
</style>
